<div class="bg-theme w-100 button-hover px-2 py-1 px-sm-0 py-sm-0">
  <button nz-button
          class="border-box w-100 p-2 rounded-3 mini bg-theme d-flex justify-content-between text-theme text-start position-relative"
          [class.selected]="selectId===history?.dataId"
          [class.border-1]="selectId===history?.dataId"
          (click)="changeSession(history?.dataId,$event)">
    <span class="overflow-hidden">{{ history?.title }}</span>
    @if(selectId===history?.dataId){
      <span
        nz-icon class="mx-2 py-1"
        #spanBt
        nz-dropdown nzTrigger="click" [nzDropdownMenu]="menu"
        nzType="dash" nzTheme="outline"></span>
    }

    <nz-dropdown-menu #menu="nzDropdownMenu">
      <div class="d-flex flex-column" >
        <button class="text-start" (click)="deleteAction()" nz-button><span nz-icon class="" nzType="delete" nzTheme="outline"></span>{{ 'chat-history.delete' | translate}}</button>
      </div>
    </nz-dropdown-menu>
  </button>
</div>
